<script setup>
// import {
//   requiredValidator,
// } from '@validators'
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  operType: {
    type: Number,
    required: true,
    default: 0,
  },
  currRow: Object,
  currOption: Object,
  sqlmanagerOption: Object,
})

const emit = defineEmits([
  'update:isDrawerOpen',
  'addData',
  'updateData',
])

const operType = ref(props.operType)
const currRow = ref(props.currRow)
const option = ref(props.currOption)
const sqlmanagerOptionList = reactive(props.sqlmanagerOption)
const row = currRow.value
const isFormValid = ref(false)
const refForm = ref()
const title = ref(operType.value == 0 ? '新增':'更新')

// 表单数据
const id = ref(row.id || '')
const sqlManagerId = ref(row.sqlManagerId)
const sqlLanguage = ref(row.sqlLanguage)
const tableName = ref(row.tableName)
const tableType = ref(row.tableType)
const sqlId = ref(row.sqlId)
const sqlName = ref(row.sqlName)
const sqlDesc = ref(row.sqlDesc)
const sqlType = ref(row.sqlType)
const sqlTemplate = ref(row.sqlTemplate)
const disabled = ref(row.disabled)

onMounted(() => {
  // changeType(type.value)
})

onUnmounted(() => {

})

// watch(type, val => {
//   changeType(val)
// })

// const showSingle = ref(true)
// const showMasterSlave = ref(false)

// const changeType = val => {
//   if(val == 'single'){
//     showSingle.value = true
//     showMasterSlave.value = false
//   }else{
//     showSingle.value = false
//     showMasterSlave.value = true
//   }
// }

// 👉 drawer close
const closeNavigationDrawer = () => {
  emit('update:isDrawerOpen', false)
  nextTick(() => {
    refForm.value?.reset()
    refForm.value?.resetValidation()
  })
}

const onSubmit = () => {
  refForm.value?.validate().then(({ valid }) => {
    if(valid) {
      const data = {
        id: id.value,
        sqlManagerId: sqlManagerId.value,
        sqlLanguage: sqlLanguage.value,
        tableName: tableName.value,
        tableType: tableType.value,
        sqlId: sqlId.value,
        sqlName: sqlName.value,
        sqlDesc: sqlDesc.value,
        sqlType: sqlType.value,
        sqlTemplate: sqlTemplate.value,
        disabled: disabled.value,
      }

      if(operType.value == 0){
        emit('addData', data)
      }else{
        emit('updateData', data)
      }
      
      emit('update:isDrawerOpen', false)
      nextTick(() => {
        refForm.value?.reset()
        refForm.value?.resetValidation()
      })
    }
  })
}

const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen', val)
}
</script>

<template>
  <VNavigationDrawer
    temporary
    style="inline-size: 1120px;"
    location="end"
    class="scrollable-content"
    :model-value="props.isDrawerOpen"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <AppDrawerHeaderSection
      :title="title"
      @cancel="closeNavigationDrawer"
    />

    <!-- <PerfectScrollbar :options="{ wheelPropagation: false }"> -->
    <VCard
      flat
      style="overflow-y: auto;"
    >
      <VCardText>
        <VForm
          ref="refForm"
          v-model="isFormValid"
          @submit.prevent="onSubmit"
        >
          <VRow>
            <VCol cols="12">
              <VAutocomplete
                v-model="sqlManagerId"
                label="SQL管理器"
                :rules="[requiredValidator]"
                :items="sqlmanagerOptionList"
                clearable
                item-title="smName"
                item-value="id"
              />
            </VCol>

            <VCol cols="12">
              <VAutocomplete
                v-model="sqlLanguage"
                label="SQL语言"
                :rules="[requiredValidator]"
                :items="option.sqlLanguage.list"
                clearable
                clear-icon="tabler-x"
                item-title="title"
                item-value="value"
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="tableName"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="表名"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VAutocomplete
                v-model="tableType"
                label="操作类型"
                :rules="[requiredValidator]"
                :items="option.tableType.list"
                clearable
                clear-icon="tabler-x"
                item-title="title"
                item-value="value"
              />
            </VCol>

            <VCol cols="12">
              <VAutocomplete
                v-model="sqlType"
                label="SQL类型"
                :rules="[requiredValidator]"
                :items="option.sqlType.list"
                clearable
                clear-icon="tabler-x"
                item-title="title"
                item-value="value"
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="sqlId"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="SqlId"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="sqlName"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="Sql名称"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextarea
                v-model="sqlDesc"
                class="setting-mb-12"
                label="SQL描述"
                clearable
              />
            </VCol>
            
            <VCol cols="12">
              <VCheckbox
                v-model="disabled"
                class="setting-mb-12"
                label="是否禁用"
              />
            </VCol>

            <VCol cols="6">
              <VBtn
                type="submit"
                class="me-3 w-100"
              >
                提交
              </VBtn>
            </VCol>
            <VCol cols="6">
              <VBtn
                class="w-100"
                type="reset"
                variant="tonal"
                color="secondary"
                @click="closeNavigationDrawer"
              >
                取消
              </VBtn>
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
    </VCard>
    <!-- </PerfectScrollbar> -->
  </VNavigationDrawer>
</template>

<style scoped>
.w-100 {
  inline-size: 100%;
}
</style>
